<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />

		<title>黑马</title>
	</head>
	<body>
		<section>
			<header class="header">黑马面试</header>
			<nav class="nav">
				<a href="#"><img src="icons/icon1.png"><span>HR面试</span></a>
				<a href="#"><img src="icons/icon2.png"><span>笔试</span></a>
				<a href="#"><img src="icons/icon3.png"><span>技术面试</span></a>
				<a href="#"><img src="icons/icon4.png"><span>模拟面试</span></a>
				<a href="#"><img src="icons/icon5.png"><span>面试技巧</span></a>
				<a href="#"><img src="icons/icon6.png"><span>薪资查询</span></a>
			</nav>
			<div class="go"><img src="icons/go.png"></div>
		</section>
		<!-- 就业指导 -->
		<section class="content">
			<div class="con-hd">
				<h4>
					<img src="icons/i1.png">
					就业指导
				</h4>
				<a href="#">更多&gt;&gt;</a>
			</div>
			<div class="con-bd-jiuye">
				<!-- Swiper -->
				<!-- jiuye类名是为了js不起冲突 -->
				<div class="swiper-container jiuye">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="#"><img src="icons/img1.png"></a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="icons/img1.png"></a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="#"><img src="icons/img1.png"></a>
							<p>老师教你应对面试技巧</p>
						</div>
					</div>
					<!-- 不需要小圆点 -->
					<!-- Add Pagination
					<div class="swiper-pagination"></div> -->
				</div>
				<!-- 根据设计稿将左右箭头提出来,swiper-wrapper里有overflowhidden -->
				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</section>
		<!-- 就业指导 -->
		<!-- 充电学习 -->
		<section class="content padding-xuexi">
			<div class="con-hd">
				<h4>
					<img src="icons/i2.png">
					充电学习
				</h4>
				<a href="#">更多&gt;&gt;</a>
			</div>
			<div class="con-bd-xuexi">
				<!-- Swiper -->
				<!-- xuexi类名是为了js不起冲突 -->
				<div class="swiper-container xuexi">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><a href="#"><img src="icons/img4.png" ></a></div>
						<div class="swiper-slide"><a href="#"><img src="icons/img5.png" ></a></div>
						<div class="swiper-slide"><a href="#"><img src="icons/img4.png" ></a></div>
						<div class="swiper-slide"><a href="#"><img src="icons/img5.png" ></a></div>
					</div>
					<!-- 不要小圆点 -->
					<!-- Add Pagination
					<div class="swiper-pagination"></div> -->
				</div>
			</div>
		</section>
		<!-- 充电学习 -->
		<!-- footer部分 -->
		<footer class="footer">
			<a href="#">首页</a>
			<a href="#">技术面试</a>
			<a href="#">模拟面试</a>
			<a href="#">我的主页</a>
		</footer>
		<!-- footer部分 -->
		<script src="js/flexible.js"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 就业轮播图 -->
		<script>
			(function() {
				var swiper = new Swiper('.jiuye', {
					// 能看到的图片个数 1+0.5*2
					slidesPerView: 2,
					// 盒子间距
					spaceBetween: 30,
					centeredSlides: true,
					loop: true,
					// 不需要小圆点
					// pagination: {
					// 	el: '.swiper-pagination',
					// 	clickable: true,
					// },
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
				});
			})()
		</script>
		<!-- 学习轮播图 -->
		<script>
			(function() {
				var swiper = new Swiper('.xuexi', {
					// 能看到的图片个数 2+0.4
					slidesPerView: 2.4,
					// 盒子间距
					spaceBetween: 20,
					// 不要小圆点
					// pagination: {
					// 	el: '.swiper-pagination',
					// 	clickable: true,
					// },
				});
			})()
		</script>
	</body>
</html>
